<template>
	<div class="app">
		<el-row>
			<el-col :span="6">
				<el-button @click="cf" style="width: 100px;margin-left: -240px;">待收费</el-button>
			</el-col>
			<el-col :span="6">
				<el-button @click="bl" style="width: 100px;margin-left: -740px;">已收费</el-button>
			</el-col>
		</el-row>

		<el-form :model="bjform" :rules="rules" ref="ruleForm">
			<el-row>
				<el-col :span="6">
					<el-form-item label="患者姓名" prop="name">
						<el-input v-model="bjform.name" style="width: 260px;margin-left: -30px;"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item label="患者卡号">
						<el-input v-model="bjform.serialnumber" style="width: 260px;margin-left: -30px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="患者年龄">
						<el-input v-model="bjform.age" style="width: 260px;margin-left: -30px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="出生日期">
						<el-date-picker type="date" placeholder="选择日期" v-model="bjform.birth" style="width: 260px;margin-left: -30px;"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="性别">
						<el-radio-group v-model="bjform.sex">
							<el-radio label="0">男</el-radio>
							<el-radio label="1">女</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="手机号">
						<el-input v-model="bjform.phone" style="width: 260px;margin-left: -40px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="证件号">
						<el-input v-model="bjform.personid" style="width: 260px;margin-left: -40px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="接诊类型" prop="medicalrecordtypeId">
						<el-select v-model="bjform.medicalrecordtypeId" placeholder="请选择活动区域" style="width: 260px;margin-left: -30px;"
						 clearable>
							<el-option v-for="t in typetable" :label="t.name" :value="t.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="6">
					<el-form-item label="地址">
						<el-cascader v-model="ssq" :options="ssqs" :props="ssqsprops" @change="handleChange" style="width: 300px;"></el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="">
						<el-input v-model="bjform.address" placeholder="请输入详细地址" style="width: 350px;margin-left: -5px;"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="诊断">
						<el-select v-model="bjform.diagnosisId" placeholder="请选择活动区域" style="width: 260px;margin-left: -60px;" clearable>
							<el-option v-for="z in diagnosistable" :label="z.name" :value="z.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="医嘱">
						<el-select v-model="bjform.adviceId" placeholder="请选择活动区域" style="width: 260px;margin-left: -60px;" clearable>
							<el-option v-for="y in advicetable" :label="y.name" :value="y.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item>
				<el-button @click="bjtj">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					name: '',
					medicalrecordtypeId:'',
					typetable:[]
				},
				rules: {
					name: [{
							required: true,
							message: '请输入患者姓名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					medicalrecordtypeId: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}]
				},
				ssq: [],
				ssqs: [],
				ssqsprops: {
					value: 'id',
					lable: 'name',
					children: 'list'
				},
				typetable: [],
				advicetable: [],
				diagnosistable: [],
				bjform: {

				}
			}
		},
		created: function() {
			this.initjztype();
			this.initadvice();
			this.initdiagnosis();
			this.initareatable();
		},
		methods: {
			handleChange(val) {
				this.ssq = val;
			},
			cf() {
				this.$router.push("/Prescription");
			},
			bl() {
				this.$router.push("/Medicals");
			},
			initareatable() {
				this.axios.get('http://localhost:9090/area/areaList').then((res) => {
					this.ssqs = res.data;
				})
			},
			initdiagnosis() {
				this.axios.get('http://localhost:9090/diagnosis/diagnosislist').then((res) => {
					this.diagnosistable = res.data;
				})
			},
			initadvice() {
				this.axios.get('http://localhost:9090/advice/advicelist').then((res) => {
					this.advicetable = res.data;
				})
			},
			initjztype() {
				this.axios.get('http://localhost:9090/medicalrecordtype/jztypelist').then((res) => {
					this.typetable = res.data;
				})
			},
			bjtj() {
				this.bjform.pid = this.ssq[0];
				this.bjform.cid = this.ssq[1];

				this.axios.post('http://localhost:9090/sickperson/add', this.bjform).then((res) => {
					this.$message({
						type: 'success',
						message: '编辑成功!'
					});
					this.bjtk = false;
					this.bjform = '';
				})
			}
		}
	}
</script>

<style>
</style>
